<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Hello, World</title>
    <style type="text/css">
        html{height:100%}
        body{height:100%;margin:0px;padding:0px}
        #container{height:100%}
    </style>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=RLejNlF8CcIqDMTQOgFbIBS0jrC24ceL">
    </script>
    <script src="static/js/jquery-3.5.1.min.js"></script>
    <link rel="stylesheet" href="static/css/page.css">
</head>

<body>
<div id="container"></div>
<script type="text/javascript">

    // 创建地图实例
    var map = new BMapGL.Map("container");
    // 创建点坐标
    var point = new BMapGL.Point(-73.985693,40.748445);
    // 初始化地图，设置中心点坐标和地图级别
    map.centerAndZoom(point, 15);
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    var zoomCtrl = new BMapGL.ZoomControl();  // 添加缩放控件
    map.addControl(zoomCtrl);
    // 标记当前是否正在使用大图标
    var isBigIconFlag=true;

    // 为地图添加缩放终止事件监听
    map.addEventListener("zoomend",function(){
        // 获取当前的缩放级别
        var zoomLevel=map.getZoom();
        if (zoomLevel>=15 && isBigIconFlag==false){
            alert("切换到大图标");
            // 切换的操作
            smallToBigBikeIcon();
            isBigIconFlag=true; //标记当前在使用大图标
        }
        if (zoomLevel<15 && isBigIconFlag){
            alert("切换到小图标");
            // 切换的操作
            bigBikeIconToSmall();
            isBigIconFlag=false; //标记当前在使用小图标
        }
/*
缩放的请求信息采集
*/
        console.log(zoomLevel)

        // 发送AJAX请求, 保存数据
        const zoomParam = {
            "optId" : 2,
            "level" : zoomLevel
        }

        $.post("/save/zoom", zoomParam, function (result) {
            console.log(result);
        });

    })


    // 保存站点id和对应bikeLevel的Map集合
    var bikeLevelMap=new Map();
    // 保存站点id和电车数量的Map集合
    var eBikeMap=new Map();
    // 保存所有Marker对象的数组
    var markerArray=[];
    // 保存站点id和信息窗数据的Map集合
    var infoWindowMap=new Map();

    var bikeBigIconSize=new BMapGL.Size(40,50);
    var bikeBigIconAnchor=new BMapGL.Size(20,50);
    var bikeBigIconOpts={anchor:bikeBigIconAnchor};
    var bikeBigIconArr=[
        new BMapGL.Icon("static/img/bi_0.png",bikeBigIconSize,bikeBigIconOpts),
        new BMapGL.Icon("static/img/bi_1.png",bikeBigIconSize,bikeBigIconOpts),
        new BMapGL.Icon("static/img/bi_2.png",bikeBigIconSize,bikeBigIconOpts),
        new BMapGL.Icon("static/img/bi_3.png",bikeBigIconSize,bikeBigIconOpts),
        new BMapGL.Icon("static/img/bi_4.png",bikeBigIconSize,bikeBigIconOpts),
        new BMapGL.Icon("static/img/bi_5.png",bikeBigIconSize,bikeBigIconOpts)
    ];

    var ebikeBigIconSize=new BMapGL.Size(50,48);
    var ebikeBigIconAnchor=new BMapGL.Size(25,48);
    var ebikeBigIconOpts={anchor:ebikeBigIconAnchor};
    var ebikeBigIconArr=[
        new BMapGL.Icon("static/img/bi_1_e.png",ebikeBigIconSize,ebikeBigIconOpts),
        new BMapGL.Icon("static/img/bi_2_e.png",ebikeBigIconSize,ebikeBigIconOpts),
        new BMapGL.Icon("static/img/bi_3_e.png",ebikeBigIconSize,ebikeBigIconOpts),
        new BMapGL.Icon("static/img/bi_4_e.png",ebikeBigIconSize,ebikeBigIconOpts)
    ];

    var smallIconSize=new BMapGL.Size(15,15);
    var smallIconAnchor=new BMapGL.Size(7,15);
    var smallIconOpts={anchor:smallIconAnchor};
    var smallIconArr=[
        new BMapGL.Icon("static/img/si_0.png",smallIconSize,smallIconOpts),
        new BMapGL.Icon("static/img/si_1.png",smallIconSize,smallIconOpts),
        new BMapGL.Icon("static/img/si_2.png",smallIconSize,smallIconOpts),
        new BMapGL.Icon("static/img/si_3.png",smallIconSize,smallIconOpts),
        new BMapGL.Icon("static/img/si_4.png",smallIconSize,smallIconOpts),
        new BMapGL.Icon("static/img/si_5.png",smallIconSize,smallIconOpts)
    ];

    // var statusUrl="data/station_status.json"
    // var infoUrl="data/station_information.json";


    //获取单车信息的地址

    var infoUrl="http://120.48.13.23/cashserver/realtime/infoData";
    var statusUrl="http://120.48.13.23/cashserver/realtime/statusData"


    $.get(statusUrl,function (statusResult) {
        console.log(statusResult)
        //浏览器控制台输出每个站点的station_id,nba,nda和计算的level
        var stationArr=statusResult.data.stations;
        for(var index in stationArr){
            var station=stationArr[index];
            var id=station.station_id;
            var nba=station.num_bikes_available;
            var nda=station.num_docks_available;
            var nea=station.num_ebikes_available;
            var bikeLevel=getBikeLevel(nba, nea, nda);

            // console.log(id+","+nba+","+nda+","+bikeLevel)
            // 将id和bikeLevel添加到Map集合中
            bikeLevelMap.set(id,bikeLevel);
            eBikeMap.set(id,nea);
            // 创建自定义对象，封装信息窗所需的状态数据
            var iwData={
                nba:nba,
                nea:nea,
                nda:nda
            }
            // 将id和iwData添加到Map集合中
            infoWindowMap.set(id,iwData);



        }

        // 请求站点信息数据
        $.get(infoUrl,function(result){
            // JSON解析 -> 从JSON数据中获取所需的数据
            console.log(result)
            var stationArray=result.data.stations;
            for(var index in stationArray){
                // 获取一个站点的信息
                var station=stationArray[index];
                var lat=station.lat;
                var lon=station.lon;
                var id=station.station_id;
                var name=station.name;
                var shortName=station.short_name;
                // 基于站点id查询站点信息窗数据对象
                var iwData=infoWindowMap.get(id);
                // 向站点信息窗数据对象上绑定新的属性
                iwData.name=name;
                iwData.shortName=shortName;
                // 创建站点的Marker
                addMarker(lon,lat,id);

            }
        });

    })
    function addMarker(lon,lat,id) {
        // 基于站点id查询站点bikeLevel
        var bikeLevel=bikeLevelMap.get(id);
        var nea=eBikeMap.get(id);
        var myIcon;
        if (nea!=0){
            myIcon=ebikeBigIconArr[bikeLevel-1];
        }else {
            myIcon=bikeBigIconArr[bikeLevel];
        }

        var point=new BMapGL.Point(lon,lat);
        var marker=new BMapGL.Marker(point,{icon:myIcon});
        // 将站点的id动态绑定到marker对象上
        marker.sid=id;
        // 为marker添加点击事件
        marker.addEventListener("click",function(){
            // alert("click");
            var iwData=infoWindowMap.get(this.sid);
            var infoWindow=getInfoWindow(iwData.name,iwData.nba-iwData.nea,iwData.nda,iwData.shortName);
            this.openInfoWindow(infoWindow);

    //点击发送站点数据到服务端

            // 采集用户点击站点的数据
            // 请求地址
            const url = "/save/click"
            // 请求参数
            const param = {
                "optType" : 1, // 操作类型
                "stationId" : this.sid, // 站点id
                "stationName" : iwData.name // 站点名称
            }
            // 发送AJAX请求, 保存数据
            $.post(url, param, function (result) {
                console.log(result);
            });


            /*
            $.ajax({
                url:"http://localhost:8080/save",
                contentType:'application/json',
                type:'POST',
                data:param
            })
             */
        })


        // 将marker对象添加到数组中
        markerArray.push(marker);
        map.addOverlay(marker);

    }

    function getBikeLevel(nba, nea, nda) {
        if(nba==0 && nda==0) {
            return 5;
        }
        if (nba==0) {
            return 0;
        }
        var index=nba/(nba+nda)
        if (index<0.15){
            return 1;
        }
        if (index<0.5){
            return 2;
        }
        if (index<1){
            return 3;
        }
        return 4;


    }

    function bigBikeIconToSmall() {
        // 遍历所有的Marker
        for(var index in markerArray){
            var marker=markerArray[index];
            var bikeLevel=bikeLevelMap.get(marker.sid)
            marker.setIcon(smallIconArr[bikeLevel])
        }
    }

    function smallToBigBikeIcon() {
        for(var index in markerArray){
            var marker=markerArray[index];
            var bikeLevel=bikeLevelMap.get(marker.sid)
            marker.setIcon(smallIconArr[bikeLevel])
            var nea=eBikeMap.get(marker.sid);
            var myIcon;
            if (nea!=0){
                myIcon=ebikeBigIconArr[bikeLevel-1];
            }else {
                myIcon=bikeBigIconArr[bikeLevel];
            }
            marker.setIcon(myIcon)

        }
    }

    function getInfoWindow(stationName,nba,nda,shortName){
        var sContent=`<div class='mapbox-content'>
    <div class='mapbox-content-top'>
        <span class='window_lastUpdate'> 0 ms ago </span>
        <span class='window_info_button'></span>
    </div>
    <div class='mapbox-content-header'>
        <h1 class='mapbox-content-header-stationName'>
            [info_stationName]
        </h1>
    </div>
    <div class='mapbox-content-detail'>
        <div class='mapbox-content-detail-bikes-available'>
            <span class='mapbox-content-detail-bikes-available-val'> 
                [nba]
            </span>
            <span class='mapbox-content-detail-bikes-available-lbl'>Bikes</span>
        </div>
        <div class='mapbox-content-detail-docks-available'>
            <span class='mapbox-content-detail-docks-available-val'> 
                [nda]
            </span>
            <span class='mapbox-content-detail-docks-available-lbl'>Docks</span>
        </div>
    </div>
    <div class='mapbox-content-footer'>
        <span class='mapbox-content-footer-shortName'> 
            Bike station: [info_shortName]
        </span>
    </div>
</div>`;
      // 使用站点实际数据替换模板中的内容
      sContent=sContent.replace("[info_stationName]",stationName)
                .replace("[nba]",nba)
                .replace("[nda]",nda)
                .replace("[info_shortName]",shortName)

      var infoWindow=new BMapGL.InfoWindow(sContent);

      return infoWindow;
    }



    var dragStartLat=0;//拖拽起始纬度
    var dragStartLon=0;//拖拽起始经度
    var dragEndLat=0;//拖拽结束纬度
    var dragEndLon=0;//拖拽结束经度
    map.addEventListener("dragstart",function () {
        var center=map.getViewport().center;
        dragStartLon=center.lng;//拖拽起始经度
        dragStartLat=center.lat;//拖拽起始纬度
    })

    map.addEventListener("dragend",function () {
        center=map.getViewport().center;
        dragEndLon=center.lng;//拖拽结束经度
        dragEndLat=center.lat;//拖拽结束纬度
        const url = "/save/drag" //请求地址
        //请求参数
        const param ={
            "optType":3,//操作类型
            "dragStartLat":dragStartLat,
            "dragStartLon":dragStartLon,
            "dragEndLat":dragEndLat,
            "dragEndLon":dragEndLon
        }
        //发送AJAX请求，保存数据
        console.log(param);
        $.post(url,param,function (result) {
            console.log(result);
        })
    })


</script>
</body>
</html>